<template>
    <section>
        <goback :getName='goName'></goback>
        <div v-show="ifShowRule" class="detailRule" ref="detailRule" :style="{height: detailRuleHeight}">
            <img src="../../assets/mall/gzdt.png">
            <div class="ruleInfo">
                <div class="ruleTitle">规则说明</div>
                <div class="ruleContent">
                    <p>省钱的方法有千万种，但是最痛快只有一种，就是免费拿！携玩乐销商城新玩法上线啦！！【众筹免单】，邀约好友帮你众筹，成功后你就可免费获得该产品，而支持你的好友不管众筹成功与否，均可获得该产品高额优惠券，同时还将以支持金的双倍给予返还！</p>
                    <p class="ruleNum">一、参与规则</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;</span> 1、选择心仪商品，发起众筹。</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;</span> 2、自主设定本次众筹支持人数（可选范围30-50人，以5递增）。</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;</span> 3、邀约好友支持众筹，其中首笔支持金须自筹，每一个众筹行为每位好友只能支持一次。</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;</span> 4、每人只可同步发布三条众筹信息，且均为不同产品。</p>
                    <p class="ruleNum">二、众筹结果及奖励</p>
                    <p class="ruleNum">&nbsp;&nbsp;&nbsp; 1、众筹成功</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;情况一：</span> 在72小时内邀请支持好友达到设定人数，视为众筹成功。</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;情况二：</span> 发起众筹后，在规定时间内当支持人数未达设定人数时，发起者可自筹补足获得该产品，视为众筹成功。</p>
                    <p class="ruleNum"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;奖&nbsp;&nbsp;&nbsp;励：</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;· </span>发起者：免费获得该众筹产品，在【我的众筹】中领取，有效期为3天。</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;· </span>支持者：在支持成功后，将立即获得该产品高额优惠券，在【我的卡券】中领取，有效期为3天；并获得本次支持金2倍比例的消费积分，可在商城购买任意商品时抵扣使用。（自筹补足不奖励消费积分)</p>
                    <p class="ruleNum">2、众筹失败</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 在规定时间内，支持人数未达标准，同时众筹发起者放弃自筹补足剩余部分，即视为众筹失败。</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;奖&nbsp;&nbsp;&nbsp;励：</span> 发起者与支持者均可获得该产品高额优惠券和支持金2倍比例的消费积分。</p>
                </div>
                <div class="closeBtn">
                    <img src="../../assets/mall/gzgb.png" @click="closeRule">
                </div>
            </div>
        </div>
        <div class="topImg">
            <img src="../../assets/mall/zcbanner.png">
            <div class="rule" @click="rule">
                <div>?</div>
                <div>规则</div>
            </div>
        </div>
        <nav>
            <div :class="{'selectedNav': selectedNav===0}" @click="selectNav(0)">发起众筹</div>
            <div :class="{'selectedNav': selectedNav===1}" @click="selectNav(1)">支持有奖</div>
            <div :class="{'selectedNav': selectedNav===2}" @click="selectNav(2)">我的众筹</div>
        </nav>
        <div class="middleInfo" v-if="selectedNav===0 || selectedNav===1">
            <div class="seqencing" :class="{seqencing_: selectedNav===1}">
                <div class="seqencing0" :class="{seqencing1: selectedNav===1}">
                    <span @click="turnPriceRank">价格</span>
                    <img src="../../assets/other/ASC.png" v-if="sellASC" @click="turnPriceDESC">
                    <img src="../../assets/other/DESC.png" v-if="sellDESC" @click="turnPriceASC">
                </div>
                <div v-if="selectedNav===1">
                    <span @click="turnTimeeRank">时间</span>
                    <img src="../../assets/other/ASC.png" v-if="timeASC" @click="turnTimeDESC">
                    <img src="../../assets/other/DESC.png" v-if="timeDESC" @click="turnTimeASC">
                </div>
            </div>
            <div class="crowdSearch0" :class="{crowdSearch1: selectedNav===1}">
                <input type="text" v-model="keyword">
                <div class="searchBtn">
                    <img src="../../assets/other/seach.png" @click="search">
                </div>
            </div>
        </div>
        <div class="selectClass" v-if="selectedNav===2">
            <div class="launchOrJoin" @click="launchOrJoin">
                <span>{{selected.launchOrJoin}}</span>
                <img src="../../assets/other/goback.png">
                <div class="dropdown-content" v-if="isShowLaunchOrJoin">
                    <div v-for="(l, index) of selection.launchOrJoin" :key="index" @click="pickLaunchOrJoin(l)" @click.stop>{{l}}</div>
                </div>
            </div>
            <div class="selectLine"></div>
            <div class="fundState" @click="fundState">
                <span>{{selected.fundState}}</span>
                <img src="../../assets/other/goback.png">
                <div class="dropdown-content" v-if="isShowFundState">
                    <div v-for="(l, index) of selection.fundState" :key="index" @click="pickFundState(l)" @click.stop>{{l}}</div>
                </div>
            </div>
        </div>
        <section class="crowdFundGoodsList" ref="crowdFundGoodsList" :style="{height:divHeight}">
            <section  v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" infinite-scroll-immediate-check="loading">
                <div v-for="(crowdFundGoods,i) of crowdFundGoods" :key="i" class="crowdFundGoods">
                    <div class="goodsImg">
                        <img :src="crowdFundGoods.thumbnail">
                    </div>
                    <div class="goodsInfo_" :style="crowdFundGoods.backgroundDiv">
                        <div class="leftInfo">
                            <div v-if="selectedNav===0">{{crowdFundGoods.name}}</div>
                            <div v-if="selectedNav===1" class="personInfo_">
                                <div class="personInfo">
                                    <div class="personInfoImg">
                                        <img :src="crowdFundGoods.memberPortrait" alt="">
                                    </div>
                                    <span class="personInfoName">{{crowdFundGoods.memberNick}}</span>
                                    <span class="productName">
                                        <div>发起众筹</div>
                                        <div class="redClass">{{crowdFundGoods.productName}}</div>
                                    </span>
                                </div>
                            </div>
                            <div v-if="selectedNav===2" class="personInfo_">
                                <!-- <div>{{crowdFundGoods.productName}}</div> -->
                                <div class="personInfo">
                                    <div class="personInfoImg">
                                        <img :src="crowdFundGoods.memberPortrait" alt="">
                                    </div>
                                    <span class="personInfoName">{{crowdFundGoods.memberNick}}</span>
                                    <span class="productName">
                                        <div>发起众筹</div>
                                        <div class="redClass">{{crowdFundGoods.productName}}</div>
                                    </span>
                                </div>
                            </div>
                            <div class="fundCountdown" v-if="selectedNav===1">
                                <count-down class="countDown" :startTime="currentTime" :endTime="crowdFundGoods.endLockTime" :dayTxt="'天'" :hourTxt="'小时'" :minutesTxt="'分钟'" :secondsTxt="'秒后结束'" @end_callback="endCountDown(crowdFundGoods)"></count-down>
                            </div>
                            <div class="fundCountdown" v-if="selectedNav===2 && crowdFundGoods.dealState===0" id="norms">
                                <count-down class="countDown" :startTime="currentTime" :endTime="crowdFundGoods.endLockTime" :dayTxt="'天'" :hourTxt="'小时'" :minutesTxt="'分钟'" :secondsTxt="'秒后结束'" @end_callback="endCountDown(crowdFundGoods)"></count-down>
                            </div>
                        </div>
                        <div class="rightInfo">
                            <div class="leftInfoPrice leftInfoPrice_" v-if="selectedNav===0">￥{{(crowdFundGoods.defaultPrice/100).toFixed(2)}}</div>
                            <div class="leftInfoPrice" v-if="selectedNav===1">￥{{crowdFundGoods.coupon}}</div>
                            <div class="fundBtn" v-if="selectedNav===0" @click="launch(crowdFundGoods)">发起众筹</div>
                            <div class="fundBtn" v-if="selectedNav===1" @click="join(crowdFundGoods)">立即支持</div>
                            <div class="myCrowdFunding" v-if="selectedNav===2">
                                <div class="fundBtn fundBtn0" @click="detail(crowdFundGoods)">众筹详情</div>
                                <div class="fundBtn" v-if="crowdFundGoods.dealState===0&&crowdFundGoods.joinType===1" @click="polishing(crowdFundGoods)">自筹补足</div>
                                <div class="fundBtn" v-if="crowdFundGoods.dealState===1&&crowdFundGoods.joinType===1&&crowdFundGoods.isReceive===null" @click="receive(crowdFundGoods)">领取</div>
                                <div class="fundBtn fundBtn2" v-if="crowdFundGoods.dealState===1&&crowdFundGoods.joinType===1&&crowdFundGoods.isReceive===1">领取成功</div>
                                <div class="fundBtn fundBtn2" v-if="crowdFundGoods.dealState===1&&crowdFundGoods.joinType===1&&crowdFundGoods.isReceive===-1">领取超时</div>
                            </div>
                            <div class="rightInfoTip rightInfoTip__" v-if="selectedNav===0">
                                <div>￥{{crowdFundGoods.priceNow}}</div>
                                <div>带回家</div>
                            </div>
                            <div class="crowdFundingTip" v-if="selectedNav===1">支持可获得<span class="redClass"> {{crowdFundGoods.discount}} </span>元抵扣券及<span class="redClass"> {{crowdFundGoods.coupon*2}} </span>积分</div>
                            <div class="rightInfoTip rightInfoTip_" v-if="selectedNav===1">已获得支持<span>{{crowdFundGoods.voteNum}}</span>/{{crowdFundGoods.personNum}}人</div>
                            <div class="rightInfoTip rightInfoTip_" v-if="selectedNav===2">已获得支持：<span>{{crowdFundGoods.voteNum}}</span>/{{crowdFundGoods.personNum}}人</div>
                        </div>
                    </div>
                </div>
            </section>
        </section>
        <loadmore v-show="loadingDom"></loadmore>
    </section>
</template>
<script>
    import { InfiniteScroll, MessageBox } from 'mint-ui'
    import CountDown from 'vue2-countdown'
    import loadmore from '../../components/loadmore'
    import goback from '../../components/goback'
    import { userInfoGet, WXShare } from '../../libs/publicMethod'
    import { product, ZCProduct, getLaunchZc, getMyProduct } from '../../libs/interface' // 获取接口
    export default {
        components: { goback, loadmore, WXShare, userInfoGet, product, InfiniteScroll, CountDown, MessageBox, ZCProduct, getLaunchZc, getMyProduct },
        data() {
            return {
                goName: '返回首页',
                userInfo: userInfoGet(),
                loading: false, // 下拉参数
                loadingDom: false,
                keyword: '',
                keyword_: '',
                crowdFundGoods: [],
                offset: sessionStorage.getItem('foundScrollOffset') ? JSON.parse(sessionStorage.getItem('foundScrollOffset')).offset || 0 : 0,
                sellASC: true,
                sellDESC: false,
                timeASC: false,
                timeDESC: true,
                divHeight: '',
                selectedNav: 0,
                detailRuleHeight: '',
                ifShowRule: false,
                selected: {
                    launchOrJoin: '发起的众筹',
                    fundState: '正在众筹',
                },
                // selection: {
                //     launchOrJoin: ['发起的众筹', '参与的众筹'],
                //     fundState: ['未领取', '正在众筹', '众筹失败','已领取','领取超时'],
                // },
                selection: {
                    launchOrJoin: ['发起的众筹', '参与的众筹'],
                    fundState: ['众筹成功', '正在众筹', '众筹失败'],
                },
                isShowLaunchOrJoin: false,
                isShowFundState: false,
                currentTime: 0,
                backgroundDiv: {},
                backgroundDiv1: {
                    backgroundImage: 'url(' + require('../../assets/mall/zccg.png') + ')',
                },
                backgroundDiv2: {
                    backgroundImage: 'url(' + require('../../assets/mall/rccg.png') + ')',
                },
                backgroundDiv3: {
                    backgroundImage: 'url(' + require('../../assets/mall/zcsb.png') + ')',
                },
            }
        },
        methods: {
            rule () {
                let vm = this
                vm.ifShowRule = true
                vm.detailRuleHeight = document.documentElement.clientHeight - 38 + 'px'
            },
            closeRule () {
                this.ifShowRule = false
            },
            selectNav (val) {
                let vm = this
                vm.isShowLaunchOrJoin = false
                vm.isShowFundState = false
                if (val === 0) {
                    if (vm.selectedNav === 0) return
                    vm.$router.replace('/crowdFunding/0')
                    // vm.isShowLaunchOrJoin = false
                    // vm.isShowFundState = false
                    vm.$refs.crowdFundGoodsList.scrollTop = 0
                    vm.crowdFundGoods = []
                    vm.loading = false
                    vm.offset = 0
                    vm.selectedNav = 0
                    vm.sellASC = true
                    vm.keyword = ''
                    vm.keyword_ = ''
                    vm.getGoodsList(vm.keyword_, 'defaultPrice', 'ASC')
                }
                if (val === 1) {
                    if (vm.selectedNav === 1) return
                    vm.$router.replace('/crowdFunding/1')
                    // vm.isShowLaunchOrJoin = false
                    // vm.isShowFundState = false
                    vm.$refs.crowdFundGoodsList.scrollTop = 0
                    vm.crowdFundGoods = []
                    vm.loading = false
                    vm.offset = 0
                    vm.selectedNav = 1
                    vm.sellASC = false
                    vm.sellDESC = false
                    vm.timeASC = false
                    vm.timeDESC = true
                    vm.keyword = ''
                    vm.keyword_ = ''
                    vm.getLaunchZcList(vm.keyword_, 'endLockTime', 'ASC')
                   
                }
                if (val === 2) {
                    // vm.isShowLaunchOrJoin = false
                    // vm.isShowFundState = false
                    if (vm.selectedNav === 2) return
                    vm.$router.replace('/crowdFunding/2')
                    vm.$refs.crowdFundGoodsList.scrollTop = 0
                    vm.crowdFundGoods = []
                    vm.loading = false
                    vm.offset = 0
                    vm.selectedNav = 2
                    vm.keyword = ''
                    vm.keyword_ = ''
                    vm.selected = {
                        launchOrJoin: '发起的众筹',
                        fundState: '正在众筹',
                    }
                    vm.getMyProductList(1, 0)
                }
            },
            launch (obj) {
                let vm = this
                // obj.norms = true
                // console.log(obj.norms)
                vm.$router.push('/crowdFundingGoods/0/0/-1/' + obj.id)
                // sessionStorage.setItem('joinCrowdFunding', JSON.stringify({ crowdFundingId: -1, join: false, joinPeople: false }))
            },
            join (obj) {
                let vm = this
                if (!obj.isCountDown) {
                    vm.$toast('众筹已结束')
                    return
                }
                // sessionStorage.setItem('joinCrowdFunding', JSON.stringify({ crowdFundingId: obj.id, join: true, joinPeople: false}))
                vm.$router.push('/crowdFundingGoods/1/0/' + obj.id + '/' + obj.productId)
            },
            turnPriceRank() {
                let vm = this
                if (vm.sellASC || vm.sellDESC) return
                vm.$refs.crowdFundGoodsList.scrollTop = 0
                vm.loading = false
                vm.offset = 0
                vm.sellASC = true
                vm.sellDESC = false
                vm.timeASC = false
                vm.timeDESC = false
                vm.getLaunchZcList(vm.keyword_, 'needPrice', 'ASC')
                
            },
            turnPriceDESC () {
                let vm = this
                vm.$refs.crowdFundGoodsList.scrollTop = 0
                vm.loading = false
                vm.offset = 0
                vm.sellASC = false
                vm.sellDESC = true
                if (vm.selectedNav === 0) {
                    vm.getGoodsList(vm.keyword_, 'defaultPrice', 'DESC')
                }
                if (vm.selectedNav === 1) {
                    vm.timeASC = false
                    vm.timeDESC = false
                    vm.getLaunchZcList(vm.keyword_, 'needPrice', 'DESC')
                }
            },
            turnPriceASC () {
                let vm = this
                vm.$refs.crowdFundGoodsList.scrollTop = 0
                vm.loading = false
                vm.offset = 0
                vm.sellASC = true
                vm.sellDESC = false
                if (vm.selectedNav === 0) {
                    vm.getGoodsList(vm.keyword_, 'defaultPrice', 'ASC')
                }
                if (vm.selectedNav === 1) {
                    vm.timeASC = false
                    vm.timeDESC = false
                    vm.getLaunchZcList(vm.keyword_, 'needPrice', 'ASC')
                }
            },
            turnTimeeRank () {
                let vm = this
                if (vm.timeASC || vm.timeDESC) return
                vm.$refs.crowdFundGoodsList.scrollTop = 0
                vm.loading = false
                vm.offset = 0
                vm.timeASC = false
                vm.timeDESC = true
                vm.sellASC = false
                vm.sellDESC = false
                vm.getLaunchZcList(vm.keyword_, 'endLockTime', 'ASC')
            },
            turnTimeDESC () {
                let vm = this
                vm.$refs.crowdFundGoodsList.scrollTop = 0
                vm.loading = false
                vm.offset = 0
                vm.sellASC = false
                vm.sellDESC = false
                vm.timeASC = false
                vm.timeDESC = true
                vm.getLaunchZcList(vm.keyword_, 'endLockTime', 'ASC')
            },
            turnTimeASC () {
                let vm = this
                vm.$refs.crowdFundGoodsList.scrollTop = 0
                vm.loading = false
                vm.offset = 0
                vm.sellASC = false
                vm.sellDESC = false
                vm.timeASC = true
                vm.timeDESC = false
                vm.getLaunchZcList(vm.keyword_, 'endLockTime', 'DESC')
            },
            search () {
                let vm = this
                if (!vm.keyword) return
                vm.$refs.crowdFundGoodsList.scrollTop = 0
                vm.loading = false
                vm.offset = 0
                vm.keyword_ = vm.keyword
                if (vm.selectedNav === 0) {
                    vm.sellASC = true
                    vm.sellDESC = false
                    vm.getGoodsList(vm.keyword_, 'defaultPrice', 'ASC')
                }
                if (vm.selectedNav === 1) {
                    vm.sellASC = false
                    vm.sellDESC = false
                    vm.timeASC = true
                    vm.timeDESC = false
                    vm.getLaunchZcList(vm.keyword_, 'endLockTime', 'DESC')
                }
            },
            getGoodsList (likeStr, sidx, sord) {
                let vm = this
                let params = {
                    productType: -2,
                    runType: -1,
                    limit: 10,
                    offset: 0,
                    likeStr: likeStr,
                    sidx: sidx,
                    sord: sord
                }
                product(params, (data) => {
                    if (data.code === 1 && data.payload.length > 0) {
                        vm.crowdFundGoods = data.payload
                        vm.crowdFundGoods.forEach(element => {
                            element.coupon = Math.floor((element.defaultPrice - element.clearPrice) / 300)
                            element.priceNow = ((Math.ceil(element.defaultPrice / 50)) / 100).toFixed(2)
                            element.norms = false
                        })
                    } else {
                        vm.$toast('暂未请求到数据,请稍后再试')
                    }
                })
            },
            getLaunchZcList (likeStr, sidx, sord) {
                let vm = this
                let params = {
                    memberId: vm.userInfo.id,
                    limit: 10,
                    offset: 0,
                    likeStr: likeStr,
                    sidx: sidx,
                    sord: sord
                }
                getLaunchZc(params, (data) => {
                    if (data.code === 1 && data.payload.length > 0) {
                        vm.crowdFundGoods = data.payload
                        vm.currentTime = new Date().getTime()
                        vm.crowdFundGoods.forEach(element => {
                            element.coupon = (Math.ceil(element.needPrice / element.personNum)) / 100
                            element.isCountDown = true
                            element.discount = Math.floor((element.needPrice - element.clearPrice) / 300)
                        })
                    } else {
                        vm.crowdFundGoods = []
                        vm.$toast('暂未请求到数据,请稍后再试')
                    }
                })
            },
            getMyProductList (joinType, dealState) {
                let vm = this
                let params = {
                    memberId: vm.userInfo.id,
                    joinType: joinType,
                    dealState: dealState,
                    limit: 10,
                    offset: 0
                }
                getMyProduct(params, (data) => {
                    if (data.code === 1) {
                        vm.crowdFundGoods = data.payload
                        vm.currentTime = new Date().getTime()
                        vm.crowdFundGoods.forEach((element)=>{
                            element.isCountDown = true
                            if (element.dealState === -1) {
                                element.backgroundDiv = vm.backgroundDiv3
                            }
                            if ((element.dealState === 1) && element.voteNum == element.personNum) {
                                element.backgroundDiv = vm.backgroundDiv1
                            }
                            if ((element.dealState === 1) && element.voteNum != element.personNum) {
                                element.backgroundDiv = vm.backgroundDiv2
                            }
                        })
                    } else {
                        vm.$toast('暂未请求到数据,请稍后再试')
                    }
                })
            },
            loadMore() {
                let vm = this
                // if (sessionStorage.getItem('saleScrollOffset')) return null
                vm.loading = true
                vm.loadingDom = true
                vm.offset += 10
                if (vm.selectedNav === 0) {
                    let params = {
                        productType: -2,
                        runType: -1,
                        limit: 10,
                        offset: vm.offset,
                        likeStr: vm.keyword_,
                        sidx: 'defaultPrice',
                        sord: 'ASC'
                    }
                    if (vm.sellASC) {
                        params.sord = 'ASC'
                    }
                    if (vm.sellDESC) {
                        params.sord = 'DESC'
                    }
                    product(params, (data) => {
                        if (data.code === 1 && data.payload.length > 0) {
                            vm.$nextTick(() => {
                                data.payload.forEach((item) => {
                                    vm.crowdFundGoods.push(item)
                                })
                                vm.crowdFundGoods.forEach(element => {
                                    element.coupon = Math.floor((element.defaultPrice - element.clearPrice) / 300)
                                    element.priceNow = ((Math.ceil(element.defaultPrice / 50)) / 100).toFixed(2)
                                    element.norms = false
                                })
                            })
                            vm.loading = false
                        } else {
                            vm.loading = true
                            vm.offset -= 10
                            vm.$toast('暂未请求到数据,请稍后再试')
                        }
                        vm.loadingDom = false
                    })
                }
                if (vm.selectedNav === 1) {
                    let params = {
                        memberId: vm.userInfo.id,
                        limit: 10,
                        offset: vm.offset,
                        likeStr: vm.keyword_,
                        sidx: 'defaultPrice',
                        sord: 'ASC'
                    }
                    if (vm.sellASC) {
                        params.sord = 'ASC'
                    } 
                    if (vm.sellDESC) {
                        params.sord = 'DESC'
                    }
                    if (vm.timeASC) {
                        params.sord = 'ASC'
                        params.sidx = 'endLockTime'
                    }
                    if (vm.timeDESC) {
                        params.sord = 'DESC'
                        params.sidx = 'endLockTime'
                    }
                    getLaunchZc(params, (data) => {
                        if (data.code === 1 && data.payload.length > 0) {
                            vm.$nextTick(() => {
                                data.payload.forEach((item) => {
                                    vm.crowdFundGoods.push(item)
                                })
                                vm.crowdFundGoods.forEach(element => {
                                    element.coupon = (Math.ceil(element.needPrice / element.personNum)) / 100
                                    element.isCountDown = true
                                    element.discount = Math.floor((element.needPrice - element.clearPrice) / 300)
                                })
                            })
                            vm.loading = false
                        } else {
                            vm.loading = true
                            vm.offset -= 10
                            vm.$toast('暂未请求到数据,请稍后再试')
                        }
                        vm.loadingDom = false
                    })
                }
                if (vm.selectedNav === 2) {
                    let launchOrJoin = ''
                    let fundState = ''
                    switch (vm.selected.launchOrJoin) {
                        case '':
                            launchOrJoin = -1
                            break
                        case vm.selection.launchOrJoin[0]:
                            launchOrJoin = 1
                            break
                        case vm.selection.launchOrJoin[1]:
                            launchOrJoin = 2
                            break
                    }
                    switch (vm.selected.fundState) {
                        case '':
                            fundState = -2
                            break
                        case vm.selection.fundState[0]:
                            fundState = 1
                            break
                        case vm.selection.fundState[1]:
                            fundState = 0
                            break
                        case vm.selection.fundState[2]:
                            fundState = -1
                            break
                        // case vm.selection.fundState[3]:
                        //     fundState = 2
                        //     break
                        // case vm.selection.fundState[4]:
                        //     fundState = -3
                        //     break
                    }
                    let params = {
                        memberId: vm.userInfo.id,
                        // joinType: vm.selected.launchOrJoin,
                        joinType: launchOrJoin,
                        // dealState: vm.selected.fundState,
                        dealState: fundState,
                        limit: 10,
                        offset: vm.offset
                    }
                    getMyProduct(params, (data) => {
                        if (data.code === 1 && data.payload.length > 0) {
                            vm.$nextTick(() => {
                                data.payload.forEach((item) => {
                                    vm.crowdFundGoods.push(item)
                                })
                                vm.currentTime = new Date().getTime()
                                vm.crowdFundGoods.forEach(element => {
                                    element.isCountDown = true
                                    if (element.dealState === -1) {
                                        element.backgroundDiv = vm.backgroundDiv3
                                    }
                                    if ((element.dealState === 1) && element.voteNum == element.personNum) {
                                        element.backgroundDiv = vm.backgroundDiv1
                                    }
                                    if ((element.dealState === 1) && element.voteNum != element.personNum) {
                                        element.backgroundDiv = vm.backgroundDiv2
                                    }
                                })
                            })
                            vm.loading = false
                        } else {
                            vm.loading = true
                            vm.offset -= 10
                            vm.$toast('暂未请求到数据,请稍后再试')
                        }
                        vm.loadingDom = false
                    })
                }
            },
            launchOrJoin () {
                let vm = this
                vm.isShowLaunchOrJoin = !vm.isShowLaunchOrJoin
                vm.isShowFundState = false
            },
            fundState () {
                let vm = this
                vm.isShowFundState = !vm.isShowFundState
                vm.isShowLaunchOrJoin = false
            },
            pickLaunchOrJoin (val) {
                let vm = this
                vm.crowdFundGoods = []
                vm.$refs.crowdFundGoodsList.scrollTop = 0
                vm.loading = false
                vm.offset = 0
                vm.isShowLaunchOrJoin = false
                vm.isShowFundState = false
                vm.selected.launchOrJoin = val
                let launchOrJoin = ''
                let fundState = ''
                switch (vm.selected.launchOrJoin) {
                    case '':
                        launchOrJoin = -1
                        break
                    case vm.selection.launchOrJoin[0]:
                        launchOrJoin = 1
                        break
                    case vm.selection.launchOrJoin[1]:
                        launchOrJoin = 2
                        break
                }
                switch (vm.selected.fundState) {
                    case '':
                        fundState = -2
                        break
                    case vm.selection.fundState[0]:
                        fundState = 1
                        break
                    case vm.selection.fundState[1]:
                        fundState = 0
                        break
                    case vm.selection.fundState[2]:
                        fundState = -1
                        break
                    // case vm.selection.fundState[3]:
                    //     fundState = 2
                    //     break
                    // case vm.selection.fundState[4]:
                    //     fundState = -3
                    //     break
                }
                vm.getMyProductList(launchOrJoin, fundState)
            },
            pickFundState (val) {
                let vm = this
                vm.crowdFundGoods = []
                vm.$refs.crowdFundGoodsList.scrollTop = 0
                vm.loading = false
                vm.offset = 0
                vm.isShowLaunchOrJoin = false
                vm.isShowFundState = false
                vm.selected.fundState = val
                let launchOrJoin = ''
                let fundState = ''
                switch (vm.selected.launchOrJoin) {
                    case '':
                        launchOrJoin = -1
                        break
                    case vm.selection.launchOrJoin[0]:
                        launchOrJoin = 1
                        break
                    case vm.selection.launchOrJoin[1]:
                        launchOrJoin = 2
                        break
                }
                switch (vm.selected.fundState) {
                    case '':
                        fundState = -2
                        break
                    case vm.selection.fundState[0]:
                        fundState = 1
                        break
                    case vm.selection.fundState[1]:
                        fundState = 0
                        break
                    case vm.selection.fundState[2]:
                        fundState = -1
                        break
                    // case vm.selection.fundState[3]:
                    //     fundState = 2
                    //     break
                    // case vm.selection.fundState[4]:
                    //     fundState = -3
                    //     break
                }
                vm.getMyProductList(launchOrJoin, fundState)
            },
            endCountDown (obj) {
                let vm = this
                obj.isCountDown = false
            },
            polishing (obj) {
                let vm = this
                if (!obj.isCountDown) {
                    vm.$toast('众筹已结束')
                    return
                }
                // if (obj.voteNum<10) {
                //     vm.$toast('当前参与众筹的人数小于10，不能补齐差价')
                //     return
                // }
                sessionStorage.setItem('peopleCount', JSON.stringify({ count: obj.personNum }))
                sessionStorage.setItem('polishing', JSON.stringify({ crowdFundingId: obj.id, polishing: true, receive:false }))
                // vm.$router.push('/crowdFundingPay/-1/' + obj.id + '/' + obj.skuId)
                location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx163c4c3d188f8ee5&redirect_uri=http%3A%2F%2Fwww.xiewan8.com%2FlyApp%2F%23%2FcrowdFundingPay%2F-1%2F' + obj.id + '%2F' + obj.skuId + '&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect'
            },
            detail (obj) {
                let vm = this
                // sessionStorage.setItem('joinCrowdFunding', JSON.stringify({ crowdFundingId: obj.id, join: false, joinPeople: true }))
                vm.$router.push('/crowdFundingGoods/0/1/' + obj.id + '/' + obj.productId)
            },
            receive (obj) {
                let vm = this
                sessionStorage.setItem('polishing', JSON.stringify({ crowdFundingId: obj.id, polishing: false, receive: true }))
                vm.$router.push('/crowdFundingPay/-1/-1/' + obj.skuId)
            },
        },
        mounted () {
            let vm = this
            document.body.style.paddingBottom = 0
            vm.divHeight = document.documentElement.clientHeight - vm.$refs.crowdFundGoodsList.offsetTop + 'px'
            vm.detailRuleHeight = document.documentElement.clientHeight - 38 + 'px'
            switch (vm.$route.params.id) {
                case '0':
                    vm.selectedNav = 0
                    vm.getGoodsList(vm.keyword_, 'defaultPrice', 'ASC')
                    break
                case '1':
                    vm.selectedNav = 1
                    vm.sellASC = false
                    vm.getLaunchZcList(vm.keyword_, 'endLockTime', 'ASC')
                    break
                case '2':
                    vm.selectedNav = 2
                    // vm.getMyProductList(-1, -2)
                    vm.getMyProductList(1, 0)
                    break
            }
        },
    }
</script>
<style scoped>
.detailRule{
    position: absolute;
    margin: auto;
    top: 2.4rem;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(0, 0, 0, .65)
}
.detailRule img{
    margin-top: 5%;
    width: 80%;
    height: 90%;
}
.ruleInfo{
    margin-top: 5%;
    width: 80%;
    height: 90%;
    position: absolute;
    top: -1%;
    right: 0;
    bottom: 0;
    left: 1%;
    margin: auto;
}
.ruleTitle{
    font-size: .95rem;
    color: #F2F2F4;
}
.ruleContent{
    margin: 12% auto 0;
    width: 80%;
    height: 71%;
    margin-bottom: 2%;
    overflow: auto;
    font-size: .8rem;
    line-height: 1.5rem;
    text-align: left;
}
.ruleNum{
    font-weight: bold;
}
.closeBtn{
    position: relative;
    z-index: 10;
    width: 100%;
    margin: auto;
    -moz-box-shadow: 0rem -2rem 2rem -.3rem rgb(255, 255, 255); 
    -webkit-box-shadow: 0rem -2rem 2rem -.3rem rgb(255, 255, 255); 
    box-shadow: 0rem -2rem 2rem -.8rem rgb(255, 255, 255); 
}
.closeBtn img{
    width: 80%;
    height: 100%;
}
.topImg{
    width: 100%;
    position: relative;
}
.topImg img{
    display: block;
    width: 100%;
}
.rule{
    position: absolute;
    top: 12%;
    right: 0;
    color: #F2F2F4;
    background-color: #9F3725;
    width: 3.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.3rem;
    font-size: .7rem;
    border-top-left-radius: .65rem;
    border-bottom-left-radius: .65rem;
}
.rule div:first-child{
    width: .8rem;
    height: .8rem;
    line-height: .85rem;
    border-radius: .4rem;
    border: 1px solid #fff;
    transform: scale(.95, .95);
}
.rule div:last-child{
    margin: 0 .3rem 0 .15rem;
    height: .75rem;
    line-height: .9rem;
}
nav{
    width: 100%;
    display: flex;
    justify-content: space-around;
    background-color: #fff;
}
nav div{
    font-size: .8rem;
    padding: 0 0 .4rem; 
    margin: .5rem 0 0;
}
.selectedNav{
    border-bottom: .2rem solid #333;
    font-weight: bold;
}
.middleInfo{
    height: 2.5rem;
    display: flex;
    padding: 1% 0;
    background-color: #F2F2F4;
}
.seqencing{
    width: 20%;
    display: flex;
    justify-content: center;
    font-size: .7rem;
}
.seqencing_{
    width: 35%;
}
.seqencing div{
    display: flex;
    align-items: center;
}
.seqencing0{
    margin-left: 8%;
    margin-right: 0;
}
.seqencing1{
    width: 45%;
}
.seqencing1~div{
    margin-left: 0%;
    width: 45%;
}
.seqencing img{
    margin-left: -10%;
    height: 1.9rem;
    transform: scale(.7, 1);
}
.selectClass{
    width: 100%;
    display: flex;
    margin: 1.5% 0;
}
.launchOrJoin, .fundState{
    width: 49.8%;
    height: 2rem;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .7rem;
    font-weight: bold;
    position: relative;
}
.launchOrJoin img, .fundState img{
    height: 60%;
    transform: rotate(270deg);
    margin-left: 4%;
}
.dropdown-content{
    position: absolute;
    left: 0;
    /* bottom: 0; */
    top: 2rem;
    width: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    border: 1px solid #EBEBEB;
    z-index: 6;
}
.dropdown-content div{
    height: 2rem;
    line-height: 2rem;
}
.selectLine{
    width: .4%;
    height: 2rem;
    background-color: #F2F2F4;
}
.crowdFundGoodsList{
    overflow: auto;
}
.crowdSearch0{
    display: flex;
    align-items: center;
    width: 78%;
    position: relative;
}
.crowdSearch1{
    width: 62%;
}
.crowdSearch0 input{
    width: 100%;
    height: 2rem;
    border-radius: 1rem;
    outline: none;
    border: 1px solid #fff;
    background-color: #E8E8E8;
    padding: 0 14% 0 5%;
}
.searchBtn{
    height: 1.3rem;
    position: absolute;
    right: 5%;
}
.searchBtn img{
    height: 100%;
}
.crowdFundGoods{
    background-color: #fff;
    border-bottom: 1px solid #F6F6F7;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.goodsImg{
    height: 6.4rem;
    width: 8rem;
}
.goodsImg img{
    display: block;
    width: 100%;
    height: 100%;
}
.goodsInfo_{
    margin-right: 3%;
    width: 48%;
    background-size: 95%;
    background-position-x: 0%;
    background-position-y: 40%;
    background-repeat: no-repeat;
}
.leftInfo{
    font-size: .7rem;
    text-align: left;
    /* background-color: red; */
}
.fundCountdown{
    margin-top: 3%;
    transform: scale(.85, .85);
    margin-left: -7%;
    color: red;
}
.fundCountdown >>> .countDown i{
    font-style: normal;
    color: #333;
}
.rightInfo{
    font-size: .7rem;
    text-align: right;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    position: relative;
    margin-top: 0%;
}
.crowdFundingTip{
    position: absolute;
    bottom: 0;
    left: -12%;
    font-size: .7rem;
    transform: scale(.8, .8);
    white-space: nowrap;
}
.personInfo_{
    position: relative;
}
.personInfo{
    width: 100%;
    /* position: absolute; */
    /* right: -12%; */
    /* top: -30%; */
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}
.productName{
    /* background-color: red; */
    width: 100%;
}
.productName div{
    display: inline-flex;
}
.productName div:last-child{
    width: 3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.personInfoImg{
    /* width: 1.6rem; */
    width: 3rem;
    /* height: 1.6rem; */
    border-radius: 1.5rem;
    overflow: hidden;
    /* background-color: red; */
}
.personInfoImg img{
    display: block;
    width: 100%;
    height: 100%;
}
.personInfoName{
    width: 4rem;
    /* background-color: red; */
    transform: scale(.9, .9);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.leftInfoPrice{
    font-size: .85rem;
    color: #F23030;
    font-weight: bold;
    position: absolute;
    left: 0;
    bottom: 40%;
}
.fundBtn{
    width: 4.5rem;
    height: 1.4rem;
    line-height: 1.4rem;
    text-align: center;
    border-radius: .2rem;
    color: #FCECEB;
    background-color: #E22419;
    border: 1px solid #E22419;
    position: relative;
}
.fundSelect{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: yellow;
    top: 0;
    left: 0;
    z-index: 10;
}
.fundBtn0{
    background-color: #fff;
    color: #E22419;
    border: 1px solid #E22419;
}
.fundBtn0~div{
    margin-left: 9%;
}
.fundBtn2{
    background-color: #848486;
    color: #fff;
    border: 1px solid #848486;
}
.rightInfoTip{
    font-size: .7rem;
    transform: scale(.8,.8);
    /* margin: 3% -16% 0 0; */
    margin: 3% 0% 0 0;
    color:#666;
    letter-spacing: .05rem;
}
.rightInfoTip_{
    /* margin: 3% -12% 5% 0; */
    margin: 1% -12% 8% 0;
}
.rightInfoTip__{
    font-size: .8rem;
    transform: scale(1,1);
    position: relative;
    left: -56%;
}
.rightInfoTip__ div:last-child{
    color: grey;
    font-size: .7rem;
}
.rightInfoTip span{
    color: red;
}
.redClass{
    color: red;
    
}
.rightInfoTip>div{
    color: #F23030;
    display: inline-block;
}
.rightInfoTip__ div:first-child{
    font-weight: bold;
}
.leftInfoPrice_{
    text-decoration: line-through;
    color: grey;
}
.myCrowdFunding{
    width: 97%;
    display: flex;
    justify-content: flex-end;
}
</style>